let arr = ['../image/tou01.jpg', '../image/tou02.jpg', '../image/tou03.jpg', '../image/tou04.jpg'];
let btn = document.querySelector('.btn');
//获得表单组合
let formGroup = document.querySelector('.form-group')
//找到pubBtn按钮
let pubBtn = document.querySelector('.pub-btn')
//标题输入框
let formTitle = document.querySelector('.form-title')
//板块中的select
let formPlate = document.querySelector('.form-plate')
//ul
let ul = document.querySelector('.comment-list>ul')
//form-content
let formContent = document.querySelector('.form-content')


//绑定点击事件
btn.onclick = function () {
    formGroup.style.display = 'block'
}

//pubBtn的点击效果 
pubBtn.onclick = function () {
    let flag = appendLi()
    if (!flag) {
        return//return后的语句不执行 所以form表单不会消失
    }
    removeLi()
    collect()
    formGroup.style.display = 'none'
}

//格式化时间函数
function getFormatTime() {
    let date = new Date()
    let year = date.getFullYear()
    let month = (date.getMonth() + 1 + '').padStart(2, '0')
    let day = (date.getDate() + '').padStart(2, '0')
    let hour = (date.getHours() + '').padStart(2, '0')
    let min = (date.getMinutes() + '').padStart(2, '0')
    let sec = (date.setSeconds() + '').padStart(2, '0')
    return `${year}-${month}-${day} ${hour}:${min}:${sec}`
}

//获取随机图片
function getImgSrc() {
    let index = Math.floor(Math.random() * arr.length)
    return arr[index]
}

//拼接li
function appendLi() {
    //获得标题输入框的值
    let titleValue = formTitle.value
    if (!titleValue) {
        alert('标题的内容不能为空')
        return false
    }

    //获得select的值
    let plateValue = formPlate.value
    if (!plateValue) {
        alert('标题的内容不能为空')
        return false
    }

    //获得图片的值
    let src = getImgSrc()
    //获得时间
    let time = getFormatTime()
    //创建一个li 用于储存数据
    let li = document.createElement('li')
    //li的内容 str保存字符串
    let str = `<!--图片-->
   <div class="img-wrap"><img src="${src}" alt="" class="comment-img"></div>
   <!--中间信息-->
   <div class="msg">
       <h3 class="title">${titleValue}</h3>
       <div class="plate">
           板块：<span>${plateValue}</span>&nbsp;&nbsp;&nbsp;&nbsp;
           发布时间：<span>${time}</span>
       </div>
   </div>
   <!--右边操作-->
   <div class="operate">
       <button class="delete">删除</button>
       <button class="collect">收藏</button>
   </div>`
    //吧str的内容放在li中
    li.innerHTML = str
    //把li放到ul里 判断ul是否有第一个子元素 如果没有就先放一个进去
    ul = document.querySelector('.comment-list>ul')//再重新找一遍ul
    let firstElement = ul.firstElementChild
    if (!firstElement) {
        ul.appendChild(li)
    } else {
        ul.insertBefore(li, firstElement)
    }
    restetForm()
    return true

}

//重置表单
function restetForm() {
    //把form-title置空
    formTitle.value = ''
    //让板块的第一个option选中
    let options = formPlate.children //formPlate板块中的select 下面的所有的子节点
    options[0].selected = true
    //form-content置空
    formContent.value = ''
}

//删除li操作
function removeLi() {
    //给删除按钮绑定事件
    let del = document.querySelectorAll('.delete')//数组
    for (let i = 0; i < del.length; i++) {
        del[i].onclick = function () {
            //确认框
            let flag = confirm('确定要删除吗？')
            if (!flag) {
                alert('您取消了删除！')
                return
            }
            let li = del[i].parentNode.parentNode
            ul.removeChild(li)
        }
    }
}

//添加收藏
function collect() {
    let col = document.querySelectorAll('.collect')
    for (let i = 0; i < col.length; i++) {
        col[i].onclick = function () {
            alert('添加收藏成功！')
        }
    }
}